<template>
	<view >
		<!-- 头部 -->
		 <u-navbar :is-back="false" v-if="tabberIndex !=3"
			:title="title"  :background="{ background: '#f8f8f8'  }" 
			title-color="#404133" :border-bottom="true" z-index="1001">
			<view class="slot-wrap" slot="right">
				<u-icon name="search" size="40" @click="showSelect"></u-icon>
				<u-icon style="margin-left: 10px;" name="plus-circle" size="40" @click="showSelect"></u-icon>
			</view>
				
		 </u-navbar>
		
		<view class="content" v-if="tabberIndex==0">
			<home :list="list"></home>
		</view>
		<view class="content" v-if="tabberIndex==1">
			<addressBook ></addressBook>
		</view>
		<view class="content" v-if="tabberIndex==2">
			<find></find>
		</view>
		<view class="content" v-if="tabberIndex==3">
			<my></my>
		</view>
		
		
		<!-- 底部 -->
		<hans-tabber :list="tabberList" style="position:fixed;bottom:0;width:100%;left:0;right:0;" @tabChange="tabChange"></hans-tabber>
	</view>
</template>

<script>
import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue'
import home from '../home/home.vue'
import addressBook from '../addressBook/addressBook.vue'
import find from '../find/find.vue'
import my from '../my/my.vue'
export default {
	components: { hansTabber, home, addressBook, find, my },
	data() {
		return {
			title: '微信',
			tabberIndex: 0,
			tabberList: [{
				 "text": "微信",
				 "iconPath": '/static/image/wechat-icon/wechat.png' ,
				 "selectedIconPath": '/static/image/wechat-icon/wechat_hl.png'
			   },
			   {
				 "text": "通讯录",
				 "iconPath": '/static/image/wechat-icon/address.png',
				 "selectedIconPath":'/static/image/wechat-icon/address_hl.png'
				 },
				 {
				   "text": "发现",
				   "iconPath": '/static/image/wechat-icon/find.png',
				   "selectedIconPath": '/static/image/wechat-icon/find_hl.png'
				 },
				 {
				   "text": "我的",
				   "iconPath": '/static/image/wechat-icon/my.png',
				   "selectedIconPath": '/static/image/wechat-icon/my_hl.png'
				 },
				 
			],
			list: [
				{
					id: 1,
					userId:3,
					name: '迪丽热巴',
					images: require('@/static/image/girl.jpg'),
					updateTime: '下午 5:10',
					show: false,
					isTop: true
				},
				{
					id: 2,
					userId:4,
					name: '小贱贱',
					images: require('@/static/image/boy.jpg'),
					updateTime: '下午 5:10',
					show: false
				},
				{
					id: 3,
					userId:2,
					name: '陈冠希',
					images: require('@/static/image/guanxi.jpg'),
					updateTime: '下午 5:10',
					show: false
				}
			]
		};
	},
	methods: {
		//打开或者关闭弹窗
		showSelect(){
			// this.selectShow = !this.selectShow;
			this.$u.route({
				url: 'pages/wechart/search/search',
			});
			
		},
		//clickTabbar
		tabChange(index) {
			console.log(index)
			if(index == 0){
				this.title = "微信"
			}
			if(index == 1){
				this.title = "通讯录"
			}
			this.tabberIndex = index;
		}
	},
};
</script>

<style lang="scss" scoped>
	.content {
		// margin-top: -40px;
	}
</style>
